<div class="page">
  <div class="page__hd">
    <h1 class="page__title">Half-screen Dialog</h1>
    <p class="page__desc">半屏组件</p>
  </div>
  <div class="page__bd page__bd_spacing">
    <a
      href="javascript:"
      role="button"
      class="weui-btn weui-btn_default"
      id="btn1"
      >样式一</a
    >
    <a
      href="javascript:"
      role="button"
      class="weui-btn weui-btn_default"
      id="btn2"
      >样式二</a
    >
  </div>

  <div id="dialogs">
    <!--BEGIN dialog1-->
    <div
      role="dialog"
      aria-modal="false"
      aria-labelledby="title1"
      tabindex="0"
      class="js_dialog"
      id="dialog1"
      style="display: none"
    >
      <div id="close1" role="option" class="weui-mask"></div>
      <div id="dialog_1" class="weui-half-screen-dialog">
        <div class="weui-half-screen-dialog__hd">
          <div class="weui-half-screen-dialog__hd__side">
            <button class="js_close weui-icon-btn">
              关闭<i class="weui-icon-close-thin"></i>
            </button>
          </div>
          <div class="weui-half-screen-dialog__hd__main">
            <strong id="title1" class="weui-half-screen-dialog__title"
              >标题</strong
            >
          </div>
        </div>
        <div class="weui-half-screen-dialog__bd">
          <br />
          <br />
          可放自定义内容
          <br />
          <br />
          <br />
          <br />
        </div>
      </div>
    </div>
    <!--END dialog1-->
    <!--BEGIN dialog2-->
    <div
      role="dialog"
      aria-modal="false"
      aria-labelledby="title2"
      tabindex="0"
      class="js_dialog"
      id="dialog2"
      style="display: none"
    >
      <div id="close2" role="option" class="weui-mask"></div>
      <div id="dialog_2" class="weui-half-screen-dialog">
        <div class="weui-half-screen-dialog__hd">
          <div class="weui-half-screen-dialog__hd__side">
            <button style="display: none" class="weui-icon-btn">
              返回<i class="weui-icon-back-arrow-thin"></i>
            </button>
            <button class="js_close weui-icon-btn">
              关闭<i class="weui-icon-close-thin"></i>
            </button>
          </div>
          <div class="weui-half-screen-dialog__hd__main">
            <strong class="weui-half-screen-dialog__title" id="title2"
              >标题</strong
            >
            <span class="weui-half-screen-dialog__subtitle">标题</span>
          </div>
          <div class="weui-half-screen-dialog__hd__side">
            <button class="weui-icon-btn">
              更多<i class="weui-icon-more"></i>
            </button>
          </div>
        </div>
        <div class="weui-half-screen-dialog__bd">
          <p class="weui-half-screen-dialog__desc">
            辅助描述内容，可根据实际需要安排
          </p>
          <p class="weui-half-screen-dialog__tips">
            辅助提示内容，可根据实际需要安排
          </p>
        </div>
        <div class="weui-half-screen-dialog__ft">
          <a href="javascript:" role="button" class="weui-btn weui-btn_default"
            >辅助操作</a
          >
          <a href="javascript:" role="button" class="weui-btn weui-btn_primary"
            >主操作</a
          >
        </div>
      </div>
    </div>
    <!--END dialog2-->
  </div>
</div>
<script type="text/javascript">
  var btn1 = document.getElementById('btn1')
  var close1 = document.getElementById('close1')
  var dialog1 = document.getElementById('dialog1')
  var dialog_1 = document.getElementById('dialog_1')
  btn1.addEventListener(
    'click',
    function () {
      $('#dialog1').attr('aria-modal', 'true')
      $('#dialog1').fadeIn(200)
      dialog_1.classList.add('weui-half-screen-dialog_show')
      setTimeout(function () {
        dialog1.focus()
      }, 300)
    },
    false
  )
  close1.addEventListener(
    'click',
    function () {
      $('#dialog1').attr('aria-modal', 'false')
      $('#dialog1').fadeOut(200)
      dialog_1.classList.remove('weui-half-screen-dialog_show')
      setTimeout(function () {
        btn1.focus()
      }, 300)
    },
    false
  )

  var btn2 = document.getElementById('btn2')
  var close2 = document.getElementById('close2')
  var dialog2 = document.getElementById('dialog2')
  var dialog_2 = document.getElementById('dialog_2')
  btn2.addEventListener(
    'click',
    function () {
      $('#dialog2').attr('aria-modal', 'true')
      $('#dialog2').fadeIn(200)
      dialog_2.classList.add('weui-half-screen-dialog_show')
      setTimeout(function () {
        dialog2.focus()
      }, 300)
    },
    false
  )
  close2.addEventListener(
    'click',
    function () {
      $('#dialog2').attr('aria-modal', 'false')
      $('#dialog2').fadeOut(200)
      dialog_2.classList.remove('weui-half-screen-dialog_show')
      setTimeout(function () {
        btn2.focus()
      }, 300)
    },
    false
  )
</script>
